<template>
  <div class="app-container">
    <!-- <el-dialog
      title="完善企业账号信息"
      :visible.sync="open"
      width="70%"
      v-dialogDrag
      append-to-body
    > -->
    <el-form ref="form" :model="form" :rules="rules" label-width="170px">
      <el-form-item label="企业名称">{{ form.nickName }}</el-form-item>

      <el-form-item label="企业类型" prop="roleIds">
        <el-select
          v-model="form.roleIds"
          multiple
          clearable
          style="width: 50%"
          placeholder="选择企业类型，可多选"
        >
          <el-option
            v-for="dict in dict.type.biz_organization_role_type"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" plain @click="submitAuthRoleForm"
          >确 认</el-button
        >
        <el-button type="primary" plain @click="cancel">关 闭</el-button>
      </el-form-item>
    </el-form>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
import { getHomeUserInfo } from "@/api/system/user";
import { unPermissionAuthRole } from "@/api/system/user";

export default {
  name: "AuthRole",
  dicts: ["biz_organization_role_type"],
  data() {
    return {
      userInfo: {},
      open: false,
      form: { roleIds: [] },
      rules: {
        roleIds: [
          { required: true, message: "企业类型不能为空", trigger: "blur" },
        ],
      },
      userId: null,
      roleIds: [],
    };
  },
  created() {
    this.open = true;
    this.loadUserInfo();
  },
  methods: {
    // 取消按钮
    cancel() {
      this.form = {};
      this.$tab.closePage();
    },
    loadUserInfo() {
      getHomeUserInfo().then((response) => {
        // this.userInfo = response.data;
        this.form = response.data;
      });
    },
    submitAuthRoleForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const userId = this.form.userId;
          const roleIds = this.form.roleIds.join(",");
          // console.log('submit', userId, roleIds)
          // console.log('sss',this.$store.getters.permission_routes);
          this.$confirm("请确认企业类型是否无误，点击确认切换角色?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              unPermissionAuthRole({ userId: userId, roleIds: roleIds }).then(
                (response) => {
                  this.active++;
                  this.$message({
                    type: "success",
                    message: "授权成功",
                  });
                  if (this.$store.state.user.company != null) {
                    this.form = this.$store.state.user.company;
                  }
                }
              );
              this.$store.dispatch("GetInfo").then(() => {
                location.href = "/index";
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "请核对信息",
              });
            });
        }
      });
    },
  },
};
</script>
<style>
.home-user-info-container {
  padding: 10px 0;
}
.home-user-info-container .el-card__body {
  padding: 10px 10px 5px 10px;
}
.home-user-info-container .div-avatar {
  padding: 5px;
  text-align: center;
}
.home-user-info-container .home-user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.home-user-info-container .user-info-header {
  font-size: 16px;
  padding: 12px 0;
  color: #5a5e66;
}
.home-user-info-container .user-info-header a {
  color: #409eff;
  padding-left: 10px;
}
.home-user-info-container .user-info-detail {
  display: block;
  font-size: 12px;
  color: #6a6b6e;
}
.home-user-info-container .user-info-detail i {
  margin-right: 15px;
}
.home-user-info-container .user-info-detail i span {
  color: #909399;
  padding-left: 5px;
}
</style>
